<!DOCTYPE html>
<html>
<head>
    <title>$!proj.projectName</title>
    #parse("include/head.html")
</head>

<body>
<!--头部-->
#parse("include/nav.html")
<!--头部 end-->
<script>
    var likeStatus = $op.Liked;
    var voteStatus = $op.Voted;
</script>
<div class="container clear">
    <div class="details-box-t clear">
        <!--幻灯片-->
        <div class="details-box-t-left"><img src="$proj.projectImg" /></div>
        <!--幻灯片 end-->

        <!--详情进度-->
        <div class="details-box-t-right">
            <dl onclick="load('$request.contextPath/user/$sender.uid')">
                <dt><img src="$sender.avatar" /></dt>
                <dd>
                    <h2>$proj.projectName</h2>
                    <h3>发起人：<font>$sender.nickname</font></h3>
                </dd>
            </dl>
            <ul>
                <li>已投票</li>
                <li class="votesnum">$votecnt</li>
                <li class="surplus text_r" id="projTimeLeft" >剩余10天</li>
                <li class="progress-bar"><span id="projectProcessBar" style="width:80%"></span></li>
                <li class="surplus" id="curprojectProcess"><span class="float_r">目标票数<font>$proj.targetVote</font></span></li>
                <li class="surplus-btn">
                    <a id="favbtn" href="javascript:void(0)" onclick="FavBtnClick($proj.projectId)"
                       class="btn #if ($op.Liked) dissable #else yellow-b #end">
                        <i class="prefer"></i> <span> #if ($op.Liked)已#end喜欢</span></a>
                    <a id="voteBtn" href="javascript:void(0)" onclick="VoteBtnClick($proj.projectId)"
                       class="btn #if ($op.Voted) dissable #else green #end ">
                        <i class="vote"></i> <span>#if ($op.Voted) 已#end投票</span></a>
                </li>
            </ul>
        </div>
        <!--详情进度 end-->
    </div>

    <div class="details-box-b-left">
        <div id="project-tab" class="tab-nav">
            <a id="activeTab" href="#projectActivePoint" class="on">项目进展</a>
            <a id="detailTab" href="#projectDetailPoint">项目详情</a>
            <a id="commentTab" href="#projectCommentPoint">评论（12）</a>
            <a id="voteTab" href="#projectVotePoint">投票记录（12）</a>
        </div>
        <!--项目进展-->
        <div class="sorts-box">
            <h2 id="projectActivePoint" class="sorts-box-title"><span>项目进展</span></h2>
            <div class="sorts-box-progress">
                #foreach ($item in ${projActives})
                <dl>
                    <dt>$item.dateDes</dt>
                    <dd>$item.content</dd>
                </dl>
                #end
            </div>
        </div>
        <!--项目进展 end-->

        <!--项目详情-->
        <div class="sorts-box">
            <h2 id="projectDetailPoint" class="sorts-box-title"><span>项目详情</span></h2>
            <div class="sorts-box-pic">
                $!proj.projectContent
            </div>
        </div>
        <!--项目详情 end-->

        <!--评论-->
        <div class="sorts-box">
            <h2 id="projectCommentPoint" class="sorts-box-title"><span>评论</span></h2>
            <div class="sorts-box-comment">
                <input type="hidden" name="projectId" id="projectId" value=$proj.projectId>
                <p><textarea id="commentInput"  class="textinput" placeholder="您必须登录后，才可发表评论。"></textarea></p>
                <p>
                    <input type="button" value="发  布" class="btn yellow-s comment-btn submitBtn">
                </p>
            </div>

            <div id="comment_list" class="comment-box-b">
            </div>
            <div class="clear"></div>
            <div id="comment_pager" style="margin: 5px;text-align: right">
            </div>
        </div>
        <!--评论 end-->

        <!--投票记录-->
        <div class="sorts-box">
            <h2 id="projectVotePoint" class="sorts-box-title"><span>投票记录</span></h2>

            <div class="voting-box">
                <table  border="0" cellspacing="0" cellpadding="0" >
                    <tr>
                        <th>投票序号</th>
                        <th>投票者</th>
                        <th>发起</th>
                        <th>投票时间</th>
                    </tr>
                    <tbody id="vote_list">
                    </tbody>
                </table>
                <div id="vote_pager" style="margin: 5px;text-align: right"></div>
            </div>
        </div>
        <!--投票记录 end-->
    </div>

    <div class="details-box-b-right">
        <!--热门推荐-->
        <div id="CheckPoint" class="details-right-s details-right-enable">
            <div class="title">热门推荐</div>
            #foreach ($item in ${hotProjects})
            <dl class="" onclick="load('$request.contextPath/project/$item.projectId')">
                <dt > <img src="$item.projectImg" /></dt>
                <dd>
                    <h2>$item.projectName</h2>
                    <h3>已投票：<font>$item.projectVotecnt</font></h3>
                    <h3 class="leftDate">$item.projectEndtime</h3>
                </dd>
            </dl>
            #end
        </div>
        <!--热门推荐 end-->

        <!--最近浏览-->
        <div class="details-right-s">
            <div class="title">最近浏览 <!--<a href="#">清空</a>--></div>
            #foreach ($item in ${projVisitor})
            <dl ><!--onclick="load('$request.contextPath/user/$item.uid')"-->
                <dt  ><img src="$item.avatar" /></dt>
                <dd>
                    <p>$item.nickname</p>
                </dd>
            </dl>
            #end
        </div>
        <!--最近浏览 end-->
    </div>
</div>
<!--底部-->
#parse("include/footer.html")
<!--底部 end-->
#parse("include/libs.html")
<script src="$request.contextPath/res/js/project.js"></script>
<script type="text/javascript" src="$request.contextPath/res/plugin/laypage/laypage.js"></script>
<script>
    $(document).ready(function() {
        updateNav("#backnav");
        var curDate = new Date();
        var beginDate = new Date('$proj.projectBegintime');
        var endDate =  new Date('$proj.projectEndtime');
        var time = parseInt((endDate-curDate)  /  1000  /  60  /  60  /24);
        if (endDate-curDate<0) {
            $("#projTimeLeft").html("已结束");
        } else {
            $("#projTimeLeft").html("剩余:<font>"+time+"</font>天");
        }
        var process = parseInt((curDate-beginDate)/(endDate-beginDate)*100)
        $('#projectProcessBar').css("width",process+"%");
        if (process > 100) {
            process = '--'
        } else if (process < 0) {
            process = '未开始';
        } else {
            process += '%';
        }
        $('#curprojectProcess').html("当前进度:<font>"+process+"</font>");

        getCommentData(1);
        getVoteData(1);

        $(".leftDate").each(function(){
            var end = new Date($(this).html());
            var time = parseInt((end - new Date())  /  1000  /  60  /  60  /24);
            if (end - new Date() < 0) {
                $(this).html("已结束");
            } else {
                $(this).html('剩余<font>'+time+'</font>天');
            }
        });

        //已登录
        if(parseInt(uid)>0) {
            $("#commentInput").attr("placeholder", "在此输入评论内容");
        }
        $('.submitBtn').click(function() {
            if(isNaN(parseInt(uid))) {
                layer.msg("请先登录!", {icon:5});
                showLoginDlg("login");
                return;
            }
            publishComment(0, $("#commentInput").val())
        });
    });

    function getCommentData(curr){
        var brands;
        $.ajax({
            url: basePath+"/project/getProjComments",
            type: "POST",
            dataType: 'json',
            data: {
                "pgNum" : curr,
                "pgSize" : 5,
                "projectId":$proj.projectId,
            },

            success: function (data) {
                $("#commentTab").html("评论 （"+data['total']+"）");
                brands = data["list"];
                //调用分页
                laypage({
                    cont: 'comment_pager',
                    pages: data['pages'],
                    curr: curr, //当前页
                    skin: '#ffab33',
                    jump: function(obj, first){ //触发分页后的回调
                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            getCommentData(obj.curr);
                        }
                    }
                })
                var str = "";
                for(var i in brands){
                    var kys = brands[i];
                    str += "<dl>"
                    str += "<dt><img src='"+kys['avatar']+"'></dt>";
                    str += "<dd>"
                    str += "<h2>"+kys['nickname']+"</h2>";
                    str += "<p>" + kys['content']+"</p>";
                    str+="<p><font>"+kys['dateDes']+"</font> <font showRelay=0 style=\"cursor: pointer;\" onclick=\"doReplay(this, '"+kys['commentId']+"')\">回复（"+kys['replays'].length+"）</font></p>";
                    if (kys['replays'].length>0) {
                        for (var j in kys['replays']) {
                            str += "<dl class=\"reply-shows\">"
                            var rep = kys['replays'][j];
                            str += "<dt><img src='"+rep['avatar']+"'></dt>";
                            str += "<dd><h2>"+rep['nickname']+"</h2>";
                            str += "<p>" + rep['content']+"</p>";
                            str+="<p><font>"+rep['dateDes']+"</font></p>";
                            str += "</dd></dl>"
                        }
                    }
                    str += "</dd></dl>"
                }
                $("#comment_list").html(str);
            },
            error:function(data){
                layer.msg('获取记录失败！', {icon: 5});
            }
        });
    }

    function getVoteData(curr){
        var brands;
        $.ajax({
            url: basePath+"/project/getProjVotes",
            type: "POST",
            dataType: 'json',
            data: {
                "pgNum" : curr,
                "pgSize" : 5,
                "projectId":$proj.projectId,
            },

            success: function (data) {
                $("#voteTab").html("投票记录 （"+data['total']+"）");
                brands = data["list"];
                //调用分页
                laypage({
                    cont: 'vote_pager',
                    pages: data['pages'],
                    curr: curr, //当前页
                    skin: '#ffab33',
                    jump: function(obj, first){ //触发分页后的回调
                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            getVoteData(obj.curr);
                        }
                    }
                })
                var str = "";
                for(var i in brands){
                    var kys = brands[i];
                    str += "<tr>"
                    str += "<td>" + kys['voterIndex']+"</td>";
                    str += "<td>" + kys['nickname'] + "</td>";
                    str += "<td>" + 3 + "</td>";
                    var votetime = new Date(kys['voterTime']);
                    str += "<td>" + votetime.toLocaleDateString() + "<br>" + votetime.toLocaleTimeString().substr(2, 8)+"</td>";
                    str += "</tr>"
                }
                $("#vote_list").html(str);
            },
            error:function(data){
                layer.msg('获取记录失败！', {icon: 5});
            }
        });
    }

    function toggleTabNav(cur) {
        $("#project-tab a").removeClass("on");
        $(cur).addClass("on");
    }

    $(window).scroll(function () {
        if($("#project-tab").offset().top-$(this).scrollTop()<=0){
            $("#project-tab").addClass("tab-fixedlayout");
        }
        if($("#CheckPoint").offset().top-$(this).scrollTop()>=0) {
            $("#project-tab").removeClass("tab-fixedlayout");
        }
        if($("#projectVotePoint").offset().top-$(this).scrollTop()<=0) {
            toggleTabNav("#voteTab");
        } else if ($("#projectCommentPoint").offset().top-$(this).scrollTop()<=0) {
            toggleTabNav("#commentTab");
        } else if ($("#projectDetailPoint").offset().top-$(this).scrollTop()<=0) {
            toggleTabNav("#detailTab");
        }else if ($("#projectActivePoint").offset().top-$(this).scrollTop()<=0) {
            toggleTabNav("#activeTab");
        }
    });

    function doReplay(obj, parentId) {
        if ($(obj).attr("showRelay") == 1) {
            $(obj).html($(obj).attr("preContent"));
            $(obj).attr("showRelay",0);
            $(".tmpReply").each(function(){
                $(this).remove();
            });
        } else {
            if(isNaN(parseInt(uid))) {
                layer.msg("请先登录!", {icon:5});
                showLoginDlg("login");
                return;
            }
            $(".tmpReply").each(function(){
                $(this).remove();
            });
            $(obj).attr("preContent", $(obj).html());
            $(obj).html('收起回复');
            $(obj).attr("showRelay",1);
            $(obj).after("<p class=\"tmpReply\">"
                    + "<textarea id=\"tmpInput\" rows=\"2\" style=\"width:670px;\" class=\"textinput\"></textarea>"
                    + "<input type='button' class=\"btn yellow-s comment-btn\" value=\"发 布\" onclick=\"tmpPub('" + parentId + "')\"></input> <p>");
        }

    }

    function tmpPub(prId) {
        publishComment(prId, $("#tmpInput").val());
    }

    function publishComment(prntID, content) {
        if (!isLogin()) {
            layer.msg("请先登录", {icon:5});
            return ;
        }
        $.ajax({
            url:basePath+"/project/addComment",
            type: "POST",
            dataType: 'json',
            data: {
                "projectId" : $("#projectId").val(),
                "parrentId":prntID,
                "content":content,
            },
            success: function(data) {
                if (data.resultCode == 0) {
                    layer.msg('发表成功！');
                    $("#commentInput").val("");
                    //location.reload(true);
                    $("#comment_list").html("");
                    getCommentData(1);
                } else {
                    layer.msg('发表失败！', {icon: 5});
                }
            },
            error:function(data){
                layer.msg('系统繁忙，请稍候重试!');
            }
        });
    }

    function FavBtnClick(projId) {
        if (!isLogin()) {
            layer.msg("请先登录", {icon:5});
            return ;
        }
        if (!likeStatus) {
            addFav(projId);
        }
    }

    function VoteBtnClick(projId) {
        if (!isLogin()) {
            layer.msg("请先登录", {icon:5});
            return ;
        }
        if (!voteStatus) {
            voteProj(projId);
        }
    }
</script>
</body>
</html>
